<template>
  <div class="about-page">
    <!-- Background Elements -->
    <div class="bg-rectangle bg-rect-top"></div>
    <div class="bg-rectangle bg-rect-bottom"></div>
    <div class="bg-rectangle bg-rect-side"></div>
    
    <div class="about-container">
      <!-- Top Section - Header -->
      <div class="top-section">
        <div class="header-icon-wrapper">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
            </svg>
          </div>
        </div>
        <h1 class="main-title">我们的成长轨迹</h1>
        <p class="main-subtitle">Our growth trajectory</p>
      </div>
      
      <!-- Company Introduction Section -->
      <div class="intro-section">
        <div class="intro-content">
          <div class="intro-badge">关于悦而启思·设计背后的故事</div>
          <h2 class="intro-title">用黑色美学定义创意，为企业与学生打造定制化设计方案</h2>
          
          <div class="philosophy-section">
            <h3 class="philosophy-title">我们的设计哲学</h3>
            <p class="philosophy-text">
              以"悦享设计，启思未来"为核心理念，我们相信黑色不仅是一种颜色，更是创意的画布。团队专注于数字化设计与视觉创意，从企业界面到学生作品，用极美学与功能性平衡，让每个设计成为独特的品牌语言。
            </p>
          </div>
          
          <div class="features-grid">
            <div class="feature-card">
              <h4 class="feature-title">原创设计，独特创意</h4>
            </div>
            <div class="feature-card">
              <h4 class="feature-title">定制需求，专业服务</h4>
            </div>
            <div class="feature-card">
              <h4 class="feature-title">版权保护，安全可靠</h4>
            </div>
          </div>
        </div>
        
        <div class="intro-image">
          <img src="@/assets/images/demo.webp" alt="关于我们" class="intro-img" />
        </div>
      </div>
      
      <!-- Timeline Section -->
      <div class="timeline-section">
        <div class="timeline-line"></div>
        
        <div class="timeline-item">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <h3 class="timeline-year">2020年</h3>
            <p class="timeline-description">悦而启思设计工作团队成立，开始为初创企业提供品牌设计服务</p>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <h3 class="timeline-year">2021年</h3>
            <p class="timeline-description">团队扩展至 4 人，服务客户超过 50 家获得多加客户认可</p>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <h3 class="timeline-year">2023年</h3>
            <p class="timeline-description">新增学生辅助设计版块业务，完成了多家名校学生创意作品辅助指导</p>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <h3 class="timeline-year">2025年</h3>
            <p class="timeline-description">上线多个产品，并且学习辅助类获得多项设计大奖，建立专业设计体系，服务范围扩展至全国</p>
          </div>
        </div>
      </div>
      
      <!-- Statistics Section -->
      <div class="stats-section">
        <h2 class="stats-title">我们的成绩单</h2>
        <p class="stats-subtitle">Our transcript</p>
        
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/>
              </svg>
            </div>
            <div class="stat-number">800+</div>
            <div class="stat-label">企业客户</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
            </div>
            <div class="stat-number">50+</div>
            <div class="stat-label">设计奖项</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>
              </svg>
            </div>
            <div class="stat-number">1000+</div>
            <div class="stat-label">学生作品</div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <div class="stat-number">95%</div>
            <div class="stat-label">客户满意度</div>
          </div>
        </div>
      </div>
      
      <!-- Partners Section -->
      <div class="partners-section">
        <h2 class="partners-title">合作品牌与院校</h2>
        <p class="partners-subtitle">Cooperative brands and institutions</p>
        
        <div class="partners-grid">
          <div class="partner-logo"></div>
          <div class="partner-logo"></div>
          <div class="partner-logo"></div>
          <div class="partner-logo"></div>
          <div class="partner-logo"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AboutPage',
});
</script>

<style lang="scss" scoped>
.about-page {
  background: #1A1A1A;
  min-height: 100vh;
  padding: 80px 0 0 0;
  margin: 0;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  overflow-x: hidden;
}

// Background Elements
.bg-rectangle {
  position: absolute;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  z-index: 0;
  
  &.bg-rect-top {
    top: 100px;
    right: -100px;
    width: 300px;
    height: 200px;
    transform: rotate(15deg);
  }
  
  &.bg-rect-bottom {
    bottom: 200px;
    left: -150px;
    width: 400px;
    height: 250px;
    transform: rotate(-10deg);
  }
  
  &.bg-rect-side {
    top: 50%;
    right: -200px;
    width: 200px;
    height: 300px;
    transform: translateY(-50%) rotate(25deg);
  }
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

// Top Section
.top-section {
  text-align: center;
  padding: 120px 0 80px;
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80') center/cover no-repeat;
  background-attachment: fixed;
  margin: 0 -40px;
  padding-left: 40px;
  padding-right: 40px;
  
  .header-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    
    .header-icon {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      
      svg {
        width: 32px;
        height: 32px;
        color: #ffffff;
      }
    }
  }
  
  .main-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
  }
  
  .main-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
  }
}

// Introduction Section
.intro-section {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
  margin-bottom: 120px;
  align-items: center;
  
  .intro-content {
    .intro-badge {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 70px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      display: inline-block;
      margin-bottom: 32px;
      backdrop-filter: blur(10px);
    }
    
    .intro-title {
      font-size: 36px;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 48px 0;
      line-height: 1.3;
    }
    
    .philosophy-section {
      margin-bottom: 48px;
      
      .philosophy-title {
        font-size: 24px;
        font-weight: 600;
        color: #ffffff;
        margin: 0 0 24px 0;
      }
      
      .philosophy-text {
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
      }
    }
    
    .features-grid {
      display: grid;
      gap: 16px;
      
      .feature-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 24px;
        backdrop-filter: blur(10px);
        
        .feature-title {
          font-size: 18px;
          font-weight: 600;
          color: #ffffff;
          margin: 0;
        }
      }
    }
  }
  
  .intro-image {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    
    .intro-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      border-radius: 20px;
    }
    
    &:hover {
      .intro-img {
        transform: scale(1.05);
      }
    }
    
    .image-placeholder {
      width: 100%;
      height: 300px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      backdrop-filter: blur(10px);
    }
  }
}

// Timeline Section
.timeline-section {
  position: relative;
  margin-bottom: 120px;
  
  .timeline-line {
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .timeline-item {
    position: relative;
    padding-left: 100px;
    margin-bottom: 60px;
    
    .timeline-dot {
      position: absolute;
      left: 32px;
      top: 8px;
      width: 16px;
      height: 16px;
      background: rgba(255, 255, 255, 0.1);
      border: 3px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      backdrop-filter: blur(10px);
    }
    
    .timeline-content {
      .timeline-year {
        font-size: 24px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 12px 0;
      }
      
      .timeline-description {
        font-size: 16px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
      }
    }
  }
}

// Statistics Section
.stats-section {
  text-align: center;
  margin-bottom: 120px;
  
  .stats-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
  }
  
  .stats-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 64px 0;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    
    .stat-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 40px 24px;
      text-align: center;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-4px);
      }
      
      .stat-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        svg {
          width: 32px;
          height: 32px;
          color: rgba(255, 255, 255, 0.1);
        }
      }
      
      .stat-number {
        font-size: 48px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
      }
      
      .stat-label {
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
      }
    }
  }
}

// Partners Section
.partners-section {
  text-align: center;
  margin-bottom: 80px;
  
  .partners-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
  }
  
  .partners-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 64px 0;
  }
  
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    
    .partner-logo {
      height: 80px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
      }
    }
  }
}

// Responsive Design
@media (max-width: 768px) {
  .about-container {
    padding: 0 20px;
  }
  
  .intro-section {
    grid-template-columns: 1fr;
    gap: 40px;
    
    .intro-image {
      order: -1;
    }
  }
  
  .timeline-section {
    .timeline-item {
      padding-left: 60px;
      
      .timeline-dot {
        left: 24px;
      }
    }
    
    .timeline-line {
      left: 32px;
    }
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  
  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .top-section {
    .main-title {
      font-size: 36px;
    }
  }
  
  .intro-section .intro-content .intro-title {
    font-size: 28px;
  }
  
  .stats-title,
  .partners-title {
    font-size: 36px;
  }
}
</style>